<template>
  <div class="product">
    <h3 class="product-title">送恋人/爱情鲜花</h3>
    <div class="product-list"  v-for="(items,index) in cates" :key="index" @click="tiaz(items.id)">
      <div class="product-list-pic">
        <img :src="items.imgs.split('||')[0]" alt />
      </div>
      <div class="product-list-info">
        <b class="product-item-info-name">{{ items.name}}</b>
         <p class="product-item-info-desc">暂无描述</p>
        <div class="product-item-info-bottom">
          <div class="product-item-info-bottom-left">
            <p class="product-item-info-price">¥{{items.price}}</p>
          </div>
          <div class="product-item-info-bottom-right" @click.stop="addnum(items)">
            <img src="https://img02.hua.com/m/home/img/home_buy_btn.png" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: 0
    }
  },
  props: {
    cates: {
      type: Array,
      required: true
    }
  },
  methods: {
    addnum (item) {
      this.$emit('addnum', item)
    },
    tiaz (id) {
      this.$emit('tiaz', id)
    }
  },
  filters: {
    filterDesc (v, len = 10) {
      if (v.length > 10) {
        return v.substr(0, len) + '...'
      } else {
        return v
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.product-title {
  text-align: center;
  line-height: 40px;
}
.product-list {
  width: 100%;
  display: flex;
  background-color: white;
  margin-bottom: 10px;
}
.product-list-pic {
  height: 176px;
}
.product-list-pic img {
  height: 176px;
}
.product-list-info {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
}
.product-item-info-desc {
  font-size: 14px;
}
.product-item-info-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-item-info-bottom-right {
  width: 24px;
  height: 24px;
}
.product-item-info-bottom-right img {
  width: 100%;
  height: 100%;
}
</style>
